<!--各类代码格式化-->
<template>
  <Tabs class="lz-tab">
    <TabPane v-for="(tab, index) in tabList" :key="index" :label="tab.label" :name="tab.name">
      <Component :is="tab.com"></Component>
    </TabPane>
  </Tabs>
</template>

<script setup>
import JsonFormat from './json-format.vue'
import VueFormat from './vue-format.vue'
import HtmlFormat from './html-format.vue'
import CssFormat from './css-format.vue'
import JsFormat from './js-format.vue'

const tabList = [
  {
    label: 'json格式化',
    name: 'json',
    com: JsonFormat
  },
  {
    label: 'vue格式化',
    name: 'vue',
    com: VueFormat
  },
  {
    label: 'html格式化',
    name: 'html',
    com: HtmlFormat

  },
  {
    label: 'css格式化',
    name: 'css',
    com: CssFormat

  },
  {
    label: 'js格式化',
    name: 'typescript',
    com: JsFormat

  }
]

</script>

<style scoped>
.lz-tab{
  padding: 16px;
}

:deep(.ivu-tabs-nav-right){
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
